<template>
  <span ref="scrollIntoView"></span>
  <div v-if="store.childModel">
    <div class="item-child1">
      <div
        class="remarks-parent-box"
        :style="{
          fontSize: store.styleInfo.contentSize,

          color: store.styleInfo.fontColor,
        }"
        v-html="getTextHtml(info?.remarks)"
      ></div>

      <img
        v-if="info.value"
        class="info-value"
        :src="$filters.getLinkUrl(info.value + '?imageView2/0/w/1180/format/webp')"
        alt=""
      />
    </div>
    <!-- <div>
      <div class="item-box" v-if="store.childModel.showpieceTotal > 0">
        <div class="banner-box" v-if="store.childModel.value">
          <img
            class="banner-img t-image--fit-cover t-image--position-center"
            :src="$filters.getLinkUrl(info.value + '?imageView2/0/h/400/format/webp')"
            alt=""
          />
        </div>

        <div
          class="banner-content"
          :style="{
            background: store.styleInfo.background,
          }"
          :class="{ 'banner-content2': !store.childModel.value }"
        >
          <div class="subTitle" v-if="store.childModel.subTitle">——{{ store.childModel.subTitle }}</div>

          <readMore :id="info.id" :remarks="info.remarks" :color="store.styleInfo.background"></readMore>
        </div>
      </div>

      <div v-else class="item-child1">
        <div class="banner-content--noImg-title"><titles :title="store.childModel?.text" /></div>
        <div class="subTitle" v-if="store.childModel.subTitle">——{{ store.childModel.subTitle }}</div>
        <div v-if="info.value" class="info-value">
          <img
            class="t-image--fit-cover t-image--position-center"
            style="width: 100%; height: 100%"
            :src="$filters.getLinkUrl(info.value + '?imageView2/0/w/1180/format/webp')"
            alt=""
          />
        </div>
        <div
          class="remarks-parent-box"
          :style="{
            fontSize: store.styleInfo.contentSize,

            color: store.styleInfo.fontColor,
          }"
          v-html="getTextHtml(info?.remarks)"
        ></div>
       
      </div>
    </div> -->
    <div class="child-content">
      <!-- 展品+辅助信息 -->
      <pageChildItem2 />
    </div>
  </div>
  <!-- <NavVue @top="top" :flag="true"></NavVue> -->
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'itemChild1',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { getTextHtml } from '@/utils/minxin';
import templateText from '@/components/templateText/templateText.vue';
import { urls } from '@/utils/request/upload';
import { ref, watch, computed, reactive, onMounted } from 'vue';
import titles from '@/wap/wapPage/wapComponents/title/title.vue';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import heardTitle from './heardTitle.vue';
import pageChildItem2 from './wapComponents/pageChildItem2.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import NavVue from './wapComponents/nav.vue';
import readMore from './wapComponents/readMore.vue';

import { useRoute } from 'vue-router';
const store = useProjectStore();
const scrollIntoView = ref(null);
const route = useRoute();
const { childModel, styleInfo } = storeToRefs(store);

const info = ref({});
const list = ref([]);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
info.value = childModel.value;
console.log(info.value.remarks);
watch(
  () => childModel,
  (value) => {
    info.value = store.childModel;
  },
  { deep: true },
);
const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth' });
};
</script>

<style lang="less" scoped>
.item-child1 {
  width: 100%;
  padding: 0 16px;
  padding-bottom: 20px;
  padding-top: 56px;
}
.item-box {
  width: 100%;
  height: 100%;
  // min-height: 100vh;
}

.remarks-parent-box {
  display: flex;
  flex-direction: column;
  text-indent: 2em;
  margin-top: 13px;
  text-align: justify;

  :deep(*) {
    text-align: justify;
    margin-bottom: 12px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
  }
}
.info-value {
  margin-top: 13px;
  width: 343px;
  height: auto;
}
</style>
